<template>
    <div :ref="chartRef" :style="{ width: '100%', height: height }"></div>
  </template>
  
  <script>
  import * as echarts from "echarts";
  
  export default {
    name: "ChartComponent",
    props: {
      chartData: {
        type: Object,
        required: true,
      },
      height: {
        type: String,
        default: "300px",
      },
    },
    data() {
      return {
        chartInstance: null,
      };
    },
    mounted() {
      this.initChart();
    },
    beforeDestroy() {
      if (this.chartInstance) {
        this.chartInstance.dispose(); // 销毁实例，释放资
      }
    },
    methods: {
      initChart() {
        const chartDom = this.$refs.chartRef;
        this.chartInstance = echarts.init(chartDom);
        this.chartInstance.setOption(this.chartData);
      },
    },
  };
  </script>
  
  <style scoped>
  div {
    width: 100%;
  }
  </style>